﻿<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head th:insert="~{ common :: css }">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lendex - Personal Portfolio Bootstrap Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

    <main class="main-wrapper">
        <!-- .....:::::: Start Header Section :::::.... -->
        <header class="header-section sticky-header d-none d-lg-block">
            <div class="header-wrapper">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col">
                            <!-- Start Header Logo -->
                            <a href="index.html" class="header-logo">
                                <img src="assets/images/logo/logo.png" alt="">
                            </a>
                            <!-- End Header Logo -->
                        </div>
                        <div class="col-auto">
                            <!-- Start Header Menu -->
                            <ul class="header-nav">
                                <li><a th:href="@{/index}">首页</a></li>
                                <li class="has-dropdown">
                                    <a th:href="@{/skill}">我的技能</a>
                                </li>
                                <li class="has-dropdown">
                                    <a th:href="@{/blog}">博客</a>
                                </li>
                                <li><a th:href="@{/project}">项目</a></li>
                                <li class="has-dropdown">
                                    <a href="#">其它</a>
                                    <ul class="submenu">
                                        <li><a th:href="@{/about}">关于我</a></li>
<!--                                        <li><a th:href="@{/contact}">联系我</a></li>-->
                                    </ul>
                                </li>
                            </ul>
                            <!-- End Header Menu -->
                        </div>

                        <div class="col">
                            <div class="header-btn-link text-end">
                               <a th:href="@{contact}" class="btn btn-sm btn-outline-one icon-space-left">Hire Me <i class="icofont-double-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- .....:::::: End Header Section :::::.... -->

        <!-- .....:::::: Start Mobile Header Section :::::.... -->
        <div class="mobile-header d-block d-lg-none">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col">
                        <div class="mobile-logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mobile-action-link text-end">
                            <a href="#mobile-menu-offcanvas" class="offcanvas-toggle offside-menu"><i class="icofont-navigation-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .....:::::: Start MobileHeader Section :::::.... -->

        <!--  Start Offcanvas Mobile Menu Section -->
        <div id="mobile-menu-offcanvas" class="offcanvas offcanvas-rightside offcanvas-mobile-menu-section">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header text-right">
                <button class="offcanvas-close"><i class="icofont-close-line"></i></button>
            </div> <!-- End Offcanvas Header -->
            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-mobile-menu-wrapper">
                <!-- Start Mobile Menu  -->
                <div class="mobile-menu-bottom">
                    <!-- Start Mobile Menu Nav -->
                    <div class="offcanvas-menu">
                        <ul>

                            <li><a th:href="@{/index}">首页</a></li>

                            <li>
                                <a th:href="@{skill}"><span>技能</span></a>

                            </li>
                            <li>
                                <a th:href="@{blog}" href="#"><span>博客</span></a>
                            </li>
                            <li><a th:href="@{/project}">项目</a></li>
                            <li>
                                <a th:href="@{about}"><span>关于我</span></a>
                            </li>
                        </ul>
                    </div> <!-- End Mobile Menu Nav -->

                </div> <!-- End Mobile Menu -->

                <!-- Start Mobile contact Info -->
                <div class="mobile-contact-info text-center">
                    <ul class="social-link">
                        <li><a target="_blank" href="https://example.com"><i class="icofont-facebook"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-twitter"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-skype"></i></a></li>
                    </ul>
                </div>
                <!-- End Mobile contact Info -->

            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div>
        <!-- ...:::: End Offcanvas Mobile Menu Section:::... -->

        <!-- Offcanvas Overlay -->
        <div class="offcanvas-overlay"></div>

        <!-- ...::: Start Breadcrumb Section :::... -->
        <div class="breadcrumb-section section-bg overflow-hidden pos-relative">
            <div class="breadcrumb-shape-top-left"></div>
            <div class="breadcrumb-shape-bottom-right"></div>
            <div class="breadcrumb-box">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb-content">
                                <h2 class="title">文章列表</h2>
                                <ul class="breadcrumb-link">
                                    <li><a href="index.html">首页</a></li>
                                    <li class="active" aria-current="page">博客列表</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Breadcrumb Section :::... -->

        <!-- ...::: Start Blog List Section :::... -->
        <div class="blog-list-section section-mt-165">
            <div class="blog-list-box">
                <div class="container">
                    <div class="row flex-lg-row-reverse flex-column-reverse">
                        <div class="col-xl-4 col-lg-5">
                          <!-- Start Sidebar Widget Area-->
                          <div class="sidebar-widget-area">

                            <!-- Start Sidebar Widget Single Item - Search Widgets -->
                            <div class="sidebar-widget-single-area search-widgets">
                                <form class="search-widgets-box" action="#" method="post">
                                    <input type="search" placeholder="Search here">
                                    <button><i class="icofont-search-1"></i></button>
                                </form>
                            </div>
                            <!-- End Sidebar Widget Single Item - Search Widgets -->

                            <!-- Start Sidebar Widget Single Item - Catagory Widgets -->
                            <div class="sidebar-widget-single-area catagory-widgets">
                                <h3 class="title">文章分类</h3>
                                <ul class="widget-nav-list catagory-item-list" th:each="c: ${categories}">
                                    <li><a th:href="@{category/{categoryId}/blogs(categoryId = ${ c.id })}"><span class="text" th:text="${c.name}">UI/UX Design</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>

<!--                                    <li><a href="#"><span class="text">Web Development</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>-->
<!--                                    <li><a href="#"><span class="text">Brand Identity</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>-->
<!--                                    <li><a href="#"><span class="text">Digital Marketing</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>-->
                                </ul>
                            </div>
                            <!-- End Sidebar Widget Single Item - Catagory Widgets -->

                            <!-- Start Sidebar Widget Single Item - Resume Widgets -->
                            <div class="sidebar-widget-single-area resume-widgets">
                                <h3 class="title">Resume</h3>
                                <ul class="widget-nav-list resume-item-list">
                                    <li><a href="#"><span class="text">Get Resume.pdf</span><span class="icon"><i class="icofont-file-pdf"></i></span></a></li>
                                    <li><a href="#"><span class="text">Get Resume.doc</span><span class="icon"><i class="icofont-file-word"></i></span></a></li>
                                    <li><a href="#"><span class="text">Get Resume.ppt</span><span class="icon"><i class="icofont-file-powerpoint"></i></span></a></li>
                                </ul>
                            </div>
                            <!-- End Sidebar Widget Single Item - Resume Widgets -->

                            <!-- Start Sidebar Widget Single Item - Recent Post Widgets -->
                            <div class="sidebar-widget-single-area recentpost-widget">
                                <h3 class="title">最近文章</h3>
                                <ul class="recent-blog-item-list">
                                    <li th:each="blog : ${sortedBlogs}">
                                        <a href="blog-details-sidebar-left.html" class="image">
                                            <img th:text="${ blog.cover }" src="assets/images/blog/recent-blog-img-1.jpg" alt="">
                                        </a>
                                        <div class="content">
                                            <h4 class="title"><a href="blog-details-sidebar-left.html" th:href="@{ /blog/{blogId}/details(blogId = ${blog.id}) }"> [[ ${ blog.title } ]] </a></h4>
                                            <div class="post-meta">
                                                <a class="date icon-space-right" th:text="${ #dates.format( blog.createTime, 'yyyy-MM-dd HH:mm:ss' ) }"><i class="icofont-calendar"></i> 09 Apr, 2021</a>
                                            </div>
                                        </div>
                                    </li>
<!--                                    <li>-->
<!--                                        <a href="blog-details-sidebar-left.html" class="image">-->
<!--                                            <img src="assets/images/blog/recent-blog-img-2.jpg" alt="">-->
<!--                                        </a>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="blog-details-sidebar-left.html">We take your amazing journey.</a> </h4>-->
<!--                                            <div class="post-meta">-->
<!--                                                <a href="#" class="date icon-space-right"><i class="icofont-calendar"></i> 10 Apr, 2021</a>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                        <a href="blog-details-sidebar-left.html" class="image">-->
<!--                                            <img src="assets/images/blog/recent-blog-img-3.jpg" alt="">-->
<!--                                        </a>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="blog-details-sidebar-left.html">Things About Portfolio.</a> </h4>-->
<!--                                            <div class="post-meta">-->
<!--                                                <a href="#" class="date icon-space-right"><i class="icofont-calendar"></i> 13 Apr, 2021</a>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                        <a href="blog-details-sidebar-left.html" class="image">-->
<!--                                            <img src="assets/images/blog/recent-blog-img-4.jpg" alt="">-->
<!--                                        </a>-->
<!--                                        <div class="content">-->
<!--                                            <h4 class="title"><a href="blog-details-sidebar-left.html">Everyone Should Know .</a> </h4>-->
<!--                                            <div class="post-meta">-->
<!--                                                <a href="#" class="date icon-space-right"><i class="icofont-calendar"></i> 15 Apr, 2021</a>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </li>-->
                                </ul>
                            </div>
                            <!-- End Sidebar Widget Single Item - Recent Post Widgets -->

                            <!-- Start Sidebar Widget Single Item - Social Widgets -->
                            <div class="sidebar-widget-single-area ">
                                <h3 class="title">Follow Me</h3>
                                <ul class="social-link">
                                    <li><a href="https://www.example.com" target="_blank"><i class="icofont-facebook"></i></a></li>
                                    <li><a href="https://www.example.com" target="_blank"><i class="icofont-dribbble"></i></a></li>
                                    <li><a href="https://www.example.com" target="_blank"><i class="icofont-linkedin"></i></a></li>
                                </ul>
                            </div>
                            <!-- End Sidebar Widget Single Item - Social Widgets -->
                          </div>
                          <!-- End Sidebar Widget Area-->
                        </div>
                        <div class="col-xl-8 col-lg-7">
                            <!--  Start Blog List  -->
                            <div class="blog-list">
                                <!-- Start Blog List  Single Item-->
                                <div class="blog-list-single-item" th:each="blog : ${blogPages}">
                                    <div class="inner-shape inner-shape-top-right"></div>
                                    <a href="blog-details.html" th:href="@{ /blog/{blogId}/details( blogId = ${ blog.id }) }" class="image">
                                        <img src="assets/images/blog/blog-feed-img-1.jpg" th:src="${blog.getCover()}" alt="">
                                    </a>
                                    <div class="content">
                                        <div class="post-meta-1">
                                            <a href="#" class="catagory" th:text="${blog.category.name}">Business</a>
                                            <a href="#" class="date" th:text="${ #dates.format( blog.createTime, 'yyyy-MM-dd HH:mm:ss' ) }">07 February, 2021</a>
                                        </div>
                                        <h4 class="title"><a href="/blog/detail" th:href="@{ /blog/{blogId}/details( blogId = ${ blog.id }) }"> [[ ${ blog.title } ]] </a></h4>

                                        <div class="post-meta-2">
                                            <a href="#" class="icon-space-right"><i class="icofont-ui-user"></i>[[ ${ blog.user.username } ]]</a>
                                            <a class="icon-space-right"><i class="icofont-heart"></i>[[ ${blog.getLikes()} ]]</a>
                                            <a class="icon-space-right"><i class="icofont-speech-comments"></i>[[ ${ blog.comments } ]]</a>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <!--  End Blog List   -->

                            <div class="d-flex justify-content-center justify-content-lg-start" >
                                <!--  Start Pagination  -->
                                <div class="pagination">
                                    <div class="row">
                                        <div class="col-12">
                                            <ul class="pagination-nav-list" th:if="${blogPages.totalPages} > 1">
                                                <li class="prev"><a href="#" th:href="@{/blog(page=${blogPages.number} -1)}" th:unless="${blogPages.first}"><i class="icofont-double-left"></i></a></li>
<!--                                                <li><a href="#">1</a></li>-->

                                                <li class="active" th:class="${num == blogPages.getPageable().pageNumber + 1 ? 'active' : ''}" th:each="num,index : ${#numbers.sequence(1, blogPages.totalPages)}">

                                                    <a href="#" th:href="@{/blog(page=${index.current - 1})}">[[ ${num} ]]</a>

                                                </li>
<!--                                                <li><a href="#">3</a></li>-->
                                                <li class="next "><a href="#" th:href="@{/blog(page=${blogPages.number} + 1)}" th:unless="${blogPages.last}"><i class="icofont-double-right"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--  Start Pagination  -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Blog List Section :::... -->

<!--        &lt;!&ndash; ...::: Start Company Logo Display Section :::... &ndash;&gt;-->
<!--        <div class="company-logo-display section-gap-tb-165">-->
<!--            <div class="company-logo-display-box">-->
<!--                <div class="container">-->
<!--                    <div class="row">-->
<!--                        <div class="col">-->
<!--                            &lt;!&ndash; Start Section Content &ndash;&gt;-->
<!--                            <div class="section-content pos-relative">-->
<!--                                <span class="section-tag">Favourite Clients</span>-->
<!--                                <h2 class="section-title">Work With Trusted Comapny.</h2>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Section Content &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="company-logo-display-wrapper">-->
<!--                        <div class="row">-->
<!--                            <div class="col">-->
<!--                                <div class="company-logo-display-slider">-->
<!--                                    &lt;!&ndash; Slider main container &ndash;&gt;-->
<!--                                    <div class="swiper-container">-->
<!--                                        &lt;!&ndash; Additional required wrapper &ndash;&gt;-->
<!--                                        <div class="swiper-wrapper">-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-1.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/1.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-2.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/2.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-3.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/3.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-4.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/4.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        &lt;!&ndash; ...::: End Company Logo Display Section :::... &ndash;&gt;-->

        <span th:replace="~{common::footer}"></span>

        <!-- material-scrolltop button -->
        <button class="material-scrolltop" type="button"></button>
    </main>

    <!-- Global Vendor, plugins JS -->

    <!-- JS Files
    ============================================ -->
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>

    <!--Plugins JS-->
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.appear.min.js"></script>
    <script src="assets/js/plugins/jquery.nice-select.js"></script>
    <script src="assets/js/plugins/venobox.min.js"></script>
    <script src="assets/js/plugins/jquery.waypoints.js"></script>
    <script src="assets/js/plugins/images-loaded.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/counter.js"></script>
    <script src="assets/js/plugins/ajax-mail.js"></script>
    <script src="assets/js/plugins/material-scrolltop.js"></script>

    <script src="assets/js/main.js"></script>

</body>

</html>
